import React, {useCallback, useRef, useEffect, memo, useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  FlatList,
} from 'react-native';
import ProductItem from './ProductItem';
import ItemSeparatorComponent from '../base/ItemSeparatorComponent';
import PatIcon from '../base/PatIcon';
import Colors from '../../utils/Colors';
// import data from './data.json';
// import ListHeaderComponent from './Header';
import ProductDetailHeader from './ProductDetailHeader';
import ProductHeader from './ProductHeader';
import LoadingFooterComponent from '../base/LoadingFooterComponent';

const ProductDe = props => {
  const [isTop, setIsTop] = useState(false);
  const ref = useRef(null);
  const {list, onLoadMore, isLoading} = props;
  const onScroll = useCallback(e => {
    if (e.nativeEvent.contentOffset.y >= 100) {
      setIsTop(true);
    }
    if (e.nativeEvent.contentOffset.y < 100) {
      setIsTop(false);
    }
  }, []);
  const loadMore = useCallback(() => {
    onLoadMore();
  }, [onLoadMore]);
  const onScrollTop = useCallback(e => {
    ref.current.scrollToIndex({index: 0});
  }, []);
  return (
    <>
      <TouchableHighlight
        activeOpacity={0.6}
        underlayColor={Colors.patBGRed}
        style={style.goTop}
        onPress={onScrollTop}>
        <View>
          <PatIcon name="arrow-up" size={20} color={Colors.white} />
        </View>
      </TouchableHighlight>
      <ProductHeader padding={24} isTop={isTop} />
      <FlatList
        initialNumToRender={8} // 初始渲染个数
        ref={ref}
        onScroll={onScroll}
        onEndReached={loadMore}
        onEndReachedThreshold={0.1}
        // style={style.FlatList}
        contentContainerStyle={style.FlatList}
        data={list}
        renderItem={renderItem}
        keyExtractor={item => item.product_id}
        numColumns={2}
        ItemSeparatorComponent={ItemSeparatorComponent}
        ListFooterComponent={() => {
          return <LoadingFooterComponent isLoading />;
        }}
      />
    </>
  );
};
const renderItem = ({item, index}) => {
  if (index === 0) {
    return <ProductDetailHeader product={item} />;
  }
  if (index === 1) {
    return null;
  }
  return <ProductItem item={item} />;
};
const style = StyleSheet.create({
  FlatList: {
    flexDirection: 'column',
    paddingBottom: 10,
    paddingLeft: '1.2%',
    paddingRight: '1.2%',
    // backgroundColor: '#f40',
  },
  goTop: {
    opacity: 0.8,
    position: 'absolute',
    bottom: 100,
    right: 20,
    width: 40,
    height: 40,
    borderRadius: 50,
    zIndex: 99,
    backgroundColor: Colors.patBGRed,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    lineHeight: 40,
    paddingBottom: 5,
  },
});
export default ProductDe;
